<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=siRg8cUYGDL8MPjwYnDXM9HrY1FbKNQG"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <title>Document</title>
</head>
<body>
    <div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
    <div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">
        <table style="width:100%;">
            <tr>
                <td colspan="2">判断是否在区域内:</td>
            </tr>
            <tr>
                <td><input type="button" value="点击打开范围" onclick="polygon()" /></td>
            </tr>
            <tr>
                <td>经度<input type="text" value="" id="lng"></td>
            </tr>
            <tr>
                <td>纬度<input type="text" value="" id="lat"></td>
            </tr>
            <tr>
                <td>结果：</td>
            </tr>
            <tr>
                <td><p id="result" style="color:red"></p></td>
            </tr>
            </table>
    </div>
    </body>

    <script type="text/javascript">
        var map = new BMap.Map("container");
        var pt = new BMap.Point(120.679417,31.29992);
        var mkr = new BMap.Marker(pt);
        var ply;  //多边形
        map.centerAndZoom(pt, 16);
        map.enableScrollWheelZoom(); //开启滚动缩放
        map.enableContinuousZoom(); //开启缩放平滑
    
        //初始化范围多边形
        //polygon();
    
        //生成多边形
        function polygon() {
            var pts = [];
            var pt1 = new BMap.Point(120.664981,31.302329);
            var pt2 = new BMap.Point(120.684762,31.302283);
            var pt3 = new BMap.Point(120.681438,31.290295);
            var pt4 = new BMap.Point(120.66649,31.288906);
            
            // var pt5 = new BMap.Point(116.279, 39.780);
            // var pt6 = new BMap.Point(116.398, 39.759);
            // var pt7 = new BMap.Point(116.558, 39.846);
            // var pt8 = new BMap.Point(116.549, 39.939);
            pts.push(pt1);
            pts.push(pt2);
            pts.push(pt3);
            pts.push(pt4);
            // pts.push(pt5);
            // pts.push(pt6);
            // pts.push(pt7);
            // pts.push(pt8);
            ply = new BMap.Polygon(pts);
    
            //演示：将面添加到地图上
            map.clearOverlays();
            map.addOverlay(ply);
        }
    
        map.addEventListener("click", function (e) {
            mkr.setPosition(e.point);
            map.addOverlay(mkr);
            //将点击的点的坐标显示在页面上
            document.getElementById("lng").value = e.point.lng;
            document.getElementById("lat").value = e.point.lat;
    
            InOrOutPolygon(e.point.lng, e.point.lat);
        });
    
        function InOrOutPolygon(lng, lat){
            var pt = new BMap.Point(lng, lat);
            var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
            if (result == true) {
                document.getElementById("result").innerHTML = "在区域范围内";
            } else {
                document.getElementById("result").innerHTML = "在区域范围外";
            }
        }
    </script>

</html>